<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{count}}</h1>
        <button @click="add">点击加 1</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 100
            }
        },
        // 函数的选项
        methods: {
            add() {
                // console.log(this.count);
                this.count++

                // 按正常情况来理解，这里获取的内容应该是最新显示的内容，但是实际我们
                // 得到的内容是上一次的值，而不是最新的值
                // console.log(document.querySelector('h1').innerText);

                // 在延迟函数中可以正常获取最新值，是一个异步执行的
                // setTimeout(() => {
                //     console.log(document.querySelector('h1').innerText);
                // })

                /*
                    原因： 因为 vue 采用的是虚拟 DOM，所谓的虚拟 DOM 其实就是一个 js 对象
                    1. vue 数据发生改变后不会立即更新到真实 DOM 中，而是先更新虚拟 DOM
                    2. 当虚拟 DOM 发生改变之后会通过 DIFF 算法将改变后的内容更新到真实 DOM 中
                    DIFF：是用来对比新老 DOM，找到有发生变化的地方，只更新有变化的地方，提升性能

                    虚拟DOM
                    DIFF算法
                    Vue3 使用的是 Proxy 数据响应式
                    Vue2 使用的是 Object.defineProperty 做的数据响应式
                */

                /*
                {
                    tag: 'div',
                        attr: {
                        id: 'app',
                            class: 'aaa',
                                title: ''
                    },
                    content: [
                        '锄禾日当午',
                        {
                            tag: 'p',
                            attr: {},
                            content: [100, {}]
                        }, {
                            tag: 'h1',
                            attr: {},
                            content: []
                        }
                    ]
                }
                */


                Vue.nextTick(() => {
                    // nextTick 会在真实 DOM 更新之后调用该函数，在这里可以操作更新之后的 DOM
                    console.log(document.querySelector('h1').innerText);
                })

            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>